<template>
  <view class="index_warp">
    <view class="text_warp">
      <textarea
        class="content"
        placeholder="请输入不少于10个字的描述"
        v-model="value"
        auto-focus
        placeholder-style="height:40upx;line-height: 40upx;"
      ></textarea>
      <view class="num">{{ value.length }}/200</view>
    </view>
    <view class="up_warp">
      <!-- <view class="up_item">
        <image src="@/static/images/sjzl.png" />
        <view class="delete_icon" catchtap="deleteImage">X</view>
      </view>
      <view class="up_item">
        <image class="add_img" src="@/static/images/add.png" />
      </view> -->
      <u-upload
        ref="uUpload"
        :action="action"
        :auto-upload="true"
        :max-count="9"
      ></u-upload>
      <view class="submit_btn" @click="submit">提交</view>
    </view>
  </view>
</template>

<script>
import { submitFeedBack } from "@/api/common";
import config from "@/config";
export default {
  data() {
    return {
      action: config.baseUrl + config.assetsPath,
      value: "",
    };
  },
  methods: {
    deleteImage(e) {
      console.log("删除图片");
    },
    submit() {
      const { value } = this;
      if (value.length < 10) {
        this.$ShowToast({
          title: "请输入不少于10个字的描述",
        });
        return;
      }
      let files = this.$refs.uUpload.lists;
      let filePaths = files.map((v) => v.url).join(",");
      submitFeedBack({
        describe: this.value,
        filePaths,
      }).then((res) => {
        console.log(res);
        this.$ShowToast({
          title: "感谢您得反馈!",
        });
        setTimeout(() => {
          this.$u.route({
            type: "back",
          });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* pages/feedback/index.wxss */
.index_warp {
  .text_warp {
    margin-top: 32upx;
    width: 750upx;
    height: 280upx;
    background: #ffffff;
    opacity: 1;
    position: relative;

    .content {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 30upx 50upx;
      line-height: 40upx;
    }

    .num {
      position: absolute;
      right: 30upx;
      bottom: 20upx;
      height: 34upx;
      font-size: 24upx;
      font-weight: 500;
      line-height: 34upx;
      color: #999999;
    }
  }

  .up_warp {
    margin-top: 20upx;
    padding: 0 30upx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .up_item {
      width: 210upx;
      height: 210upx;
      background: #ffffff;
      border-radius: 20upx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24upx;
      position: relative;

      .delete_icon {
        width: 30upx;
        height: 30upx;
        background-color: #e94242;
        color: #fff;
        position: absolute;
        right: -15upx;
        top: -15upx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &:nth-child(n + 2) {
        margin: 0 27.5upx 24upx;
      }

      image {
        border-radius: 20upx;
      }

      .add_img {
        width: 44%;
        height: 44%;
      }
    }

    .submit_btn {
      position: fixed;
      left: 30upx;
      bottom: 10upx;
      width: 690upx;
      height: 100upx;
      background: #0058a3;
      font-size: 36upx;
      font-weight: bold;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50upx;
      margin-top: 300upx;
    }
  }
}
</style>
